<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        ul{
            list-style:none;
        }
        a{
            cursor: pointer;
        }

        /* 功能区 */
        .head-band{
            height: 44px;
            background-color: #2459a2;
            position: fixed;
            right: 0;
            left: 0;
        }
        .head-contion{
            height: 44px;
            width: 960px;
            margin: 0 auto ;
            line-height: 44px;

        }
        .head-contion a img{
            margin-top: 11px;
            float: left;
        }
        .action-menu{

            float: left;
            margin-left: 20px;

        }
        .action-menu .tb{
            color: #fff;
            font-size: 12px;
            text-decoration: none;
            display: inline-block;
            margin-left: -3px;
            padding: 0 13px 0 16px;
            /*background-color: #204982;*/
        }
        .action-menu a:hover{
            background-color:#66B3FF;
        }
        .action-inp,.action-nav{
            float: right;
        }
        .action-nav .login-btn{
            padding: 0 20px 0 20px;
            height: 44px;
            font-size: 12px;
            color: #fff;
            display: inline-block;
            text-decoration: none;
        }
        .action-nav a:hover {
            background-color: #0080FF;



        }
        .action-inp{
             margin-top: 8px;
         }
        .action-inp .sousu{
            float: right;
            height: 30px;
            width: 91px;
            background-color: #f4f4f4;
            border: 1px solid #e0e0e0;
            outline: none;
        }
        .action-inp a{
            float: right;
            height: 30px;
            width: 29px;
            display: inline-block;
            background-color: #f4f4f4;
            border: 1px solid #e0e0e0;
        }
        .action-inp a span{
            display: block;
            width: 12px;
            height: 12px;
            margin-left: 9px;
            margin-top: 11px;
            background: url("http://dig.chouti.com/images/icon.png");
            background-position: 0 40px;

        }

        /* 内容区 */
        .main-contion-band{
            padding-top: 44px;
            font-size: 12px;
            background-color: #ededed;
        }
        .main-contion{
            width: 960px;
            margin: 0 auto;
            padding:6px 28px 60px ;
            background-color: white;
        }
        .main-contion .contion-L{
            float: left;
            width: 630px;
        }
        .main-contion .contion-R{
            clear: both;
            float: right;
            width: 300px;

        }
        .top-menu{

        }
        .top-menu .tm-a{
            float: left;
        }
        .top-menu .tm-a a {
            display: inline-block;
            width: 60px;
            height: 26px;
            margin-top: 3px;
            margin-bottom: 10px;
            line-height: 26px;
            text-align: center;
            margin-left:3px;
        }
        .top-menu .tm-b{
            float: left;
            margin-left: 134px;
            margin-top: 8px;
        }
        .top-menu .tm-b a{
            margin-left: 10px;
        }
        .top-menu .tm-c{
            width: 134px;
            height: 30px;
            border: 1px solid #8aab30;
            float: right;
            font-size: 14px;
            text-decoration: none;
            line-height: 30px;
            text-align: center;
            background-color: #84a42b;
        }
        .top-menu .tm-c:hover{
            background-color:#73BF00;
        }
        .top-menu .tm-c span{
            color: white;
        }
        .contion-list{
            clear: both;
        }
        .contion-list .item{
            padding-top: 10px;
            border-top:1px solid #dce7f4;
        }
        .contion-list .part1 .title{
            text-align: center;
            font-size: 14px;
            color: #369;
            font-weight: 700;
        }
        .item .news-pic{
            float: right;
        }
        .item .news-content .part1{
            line-height: 20px;
        }
        .item .news-content .part2{
            padding-top: 16px;
            margin-bottom: 12px;
        }
        .item .news-content .part2 b{
            margin-left: 3px;
        }
        .item .news-content .part1 .sign-a{
            color:#99aecb;
        }
        .item .news-content .part1 .sign-b{
            margin-left: 11px;
        }
        .main-contion-band .numbers{
            clear: both;
            padding-bottom: 40px;
            padding-top: 5px;

        }
        .main-contion-band .numbers ul .li-a{
            margin-top: 15px;
            margin-left: 6px;
            float: left;
            width: 34px;
            height: 34px;
            border: 1px solid #e1e1e1;
            text-align: center;
            line-height: 34px;
        }
        .main-contion-band .numbers ul .li-b{
            margin-top: 15px;
            margin-left: 6px;
            float: left;
            width: 77px;
            height: 34px;
            border: 1px solid #e1e1e1;
            text-align: center;
            line-height: 34px;
        }
        .item .news-content .part2 a{
            display: inline-block;
            min-width:75px;
        }
        .item .news-content .part2 a b{
            vertical-align: 4px;
            color: #99aecb;
        }
        .item .news-content .part2 .pta,.ptb b{
            font-size: 14px;
        }
        .item .news-content .part2 .ptc b{
            font-size: 12px;
        }
        .item .news-content .part2 .pta span{
            display: inline-block;
            width: 18px;
            height: 18px;
            /*background-color: red;*/
            background: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");
            background-position: 0 138px;
        }
        .item .news-content .part2 .ptb span{
            display: inline-block;
            width: 18px;
            height: 18px;
            /*background-color: red;*/
            background: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");
            background-position: 0 256px;
        }
        .item .news-content .part2 .ptc span{
            display: inline-block;
            width: 18px;
            height: 18px;
            /*background-color: red;*/
            background: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");
            background-position: 0 374px;
        }

        /* 下标区*/
        .main-contion-band .footer {
            background-color: #ededed;
        }
        .main-contion-band .footer .w{
            width: 960px;
            margin: 0 auto;
            padding:6px 28px 20px;
            background-color: white;
        }
        .main-contion-band .footer .w .f1-w,.f2-w,.f3-w{
            text-align:center;
            font-size: 12px;
        }
        .main-contion-band .footer .w .f1-w a{
            text-decoration:none;
            margin: 0 8px 0 8px;
            color: #369;
        }
        .main-contion-band .footer .w .f1-w,.f2-w,.f3-w {
            text-align: center;
            font-size: 12px;
        }
        .main-contion-band .footer .w .f1-w,.f2-w a,span{
            color: #333;
        }
        /*返回顶部按钮*/
        .topbot{
            display: inline-block;
            background: url("http://dig.chouti.com/images/Back-to-the-top_38_78.png");
            height: 38px;
            width: 38px;
            position: fixed;
            right: 220px;
            bottom: 10px;
            cursor: pointer;
        }
        .hide{
            display: none;
        }
        .topbot:hover{
            background-position: 0 116px;
        }
        /*登录注册模态框*/
        .back{
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            background-color: rgba(0,0,0,.6);
            z-index: 1;
        }
        .Models .login-register{
            width: 600px;
            height: 300px;
            background-color: white;
            position: fixed;
            top: 50%;
            right: 50%;
            margin-right: -200px;
            margin-top: -200px;
            z-index: 2;

        }
        .Models .login{
            width: 300px;
            height: 300px;
        }
        .Models .register{
            width: 300px;
            height: 300px;
            margin-left: 300px;
            margin-top: -300px;
            border-left: 1px dotted black ;
        }
        .Models .color{
            background: #e7ecf2;
            height: 30px;
            padding-left: 10px;
            line-height: 30px;
            color: #abb6d2;
        }
        .Models .rel{
            position: relative;
            top: -30px;
        }
        .Models .right a{
            display: inline-block;

            position: relative;
            right: -230px;
            font-weight: bold;
            cursor: pointer;
        }
        .Models .hide{
            display: none;
        }
        .Models .center{
            margin-left: 20px;
        }
        .Models .prompt{
            font-size: 12px;
            color: red;
        }
        /*发布模态框*/
        .Fb .back{
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            background-color: rgba(0,0,0,.6);
            z-index: 1;
        }
        .Fb .content{
            width: 580px;
            position: absolute;
            left: 30%;
            top: 20%;
            background-color: #e6ecf3;
            z-index: 2;
        }
        .Fb .content .title{
            height: 28px;
            color: #8aa3c4;
            line-height: 26px;
            font-size: 14px;
            cursor: move;

        }
        .Fb .content .title .title-b{
            float: right;
            margin-right: 15px;
            text-decoration: none;
        }
        .Fb .content .con-content{
            background-color: #fff;
            padding: 0 20px 15px;

        }
        .Fb .con-content .con-title{
            display: inline-block;
            border-bottom: 1px solid #ccdcef;
            width: 100%;
            margin-top: 15px;

        }
        .Fb .con-content .con-title a{
            float: left;
            display: inline-block;
            width: 90px;
            line-height: 35px;
            margin-right: 4px;
            text-decoration: none;
            cursor: pointer;
            text-align: center;
            background: url("http://dig.chouti.com/images/bottom_mo_128_220.png?v=2.8");
            /*background-position: 0 109px;*/

        }
        .Fb .show .b-a{
            font-size: 12px;
            color: #999;
        }
        .Fb .show .b-c{
            margin-top: 20px;
        }
        .Fb .show .b-b{
            padding: 5px;
            font-size: 12px;
            background-color: #e6ecf3;
        }
        .Fb .show .b-b input{
            width: 523px;
            line-height: 24px;
            margin-left: 2px;
            margin-top: 1px;
        }
        .Fb .show .b-d textarea{
            width: 523px;
        }
        .Fb .show .c-a{
            padding-top: 5px;
            font-size: 12px;
            color: #999;
        }
        .Fb .show .c-b input{
            width: 62px;
            height: 31px;
            opacity: 0;
            margin-left: -45px;
            position: absolute;
        }
        .Fb .show .c-b{
            background-color: #e6ecf3;
            padding: 5px;
        }
        .Fb .show .c-b a{
            text-decoration: none;
            background: url("http://dig.chouti.com/images/bottom.png?v=2.8");
            background-position: 0 0;
            display: inline-block;
            width: 62px;
            height: 31px;
            font-size: 14px;
            color: white;
            line-height: 31px;
            text-align: center;
        }
        .Fb .show .c-b span{
            font-size: 12px;
            color: #8ca1c1;
            font-family:"\5b8b\4f53";
        }
        .Fb .show .c-c{
            background-color: #e6ecf3;
            padding: 5px;
            margin-top: 10px;
        }
        .Fb .show .c-c textarea{
            width: 528px;
        }
        .Fb .show .c-d{
            background-color: #e6ecf3;
            height: 30px;

        }
        .Fb .show .c-d span {
            display: inline-block;
            position: relative;
            right: -375px;
            font-size: 15px;
            color: #8ca1c1;
        }
        .Fb .show .c-e {
            padding-bottom: 70px;
        }
        .Fb .show .c-e .ce-a{
            display: inline-block;
            float: right;
            margin-top: 20px;
            width: 96px;
            height: 31px;
            color: #fff;
            font-size: 14px;
            text-align: center;
            line-height: 31px;
            font-weight:700;
            background: url("http://dig.chouti.com/images/bottom.png?v=2.8");
            background-position: 0 185px;
        }
        .Fb .con-title a:hover{
            background-position: 0 183px;
        }
        .show-a{
            background-position: 0 146px;
            /*border-bottom:1px solid #fff;*/
        }


    </style>
    {% block css %}{% end %}
    <!--<link rel="stylesheet" href="/statics/bootstrap-3.3.7-dist/css/bootstrap.css">-->
    <link rel="stylesheet" href="{{static_url('bootstrap-3.3.7-dist/css/bootstrap.css')}}">

    <!--<script src="/ccc/jquery-3.2.1.min.js"></script>-->
    <script src="{{static_url('jquery-3.2.1.min.js')}}"></script>

    <!--<script src="{{static_url('../statics/bootstrap-3.3.7-dist/js/bootstrap.js')}}"></script>-->
    <script src="{{static_url('bootstrap-3.3.7-dist/js/bootstrap.js')}}"></script>



</head>

<body >
    <!--功能区-->
    <div class="head-band">
        <div class="head-contion">
            <a href="http://dig.chouti.com/"><img src="http://dig.chouti.com/images/logo.png"></a>
            <div class="action-menu">
                <a href="http://dig.chouti.com/" class="tb active">全部</a>
                <a href="http://dig.chouti.com/" class="tb">42区</a>
                <a href="http://dig.chouti.com/" class="tb">段子</a>
                <a href="http://dig.chouti.com/" class="tb">图片</a>.
                <a href="http://dig.chouti.com/" class="tb">挨踢1024</a>
                <a href="http://dig.chouti.com/" class="tb">你问我答</a>
            </div>
            <div class="action-inp">
                <form>
                    <a>
                        <span>
                        </span>
                    </a>
                    <input type="text" class="sousu">
                </form>
            </div>
            <div class="action-nav">
                <a class="login-btn" >注册</a>
                <a class="login-btn">登录</a>
            </div>
            {% block body %}{% end %}
        </div>
    </div>
    <!--内容区-->
    <div class="main-contion-band">
        <div class="main-contion">
            <div class="contion-L">
                <!--发布菜单栏-->
                <div class="top-menu">
                    <div class="tm-a">
                        <a>最热</a>
                        <a>发现</a>
                        <a>人类分布</a>
                    </div>
                    <div class="tm-b">
                        <a>即时排序</a>
                        <a>24小时</a>
                        <a>三天</a>
                    </div>
                    <a class="tm-c">
                        <span>+</span>
                        <span >发布</span>
                    </a>
                </div>

                <!--新闻显示区-->
                <div class="contion-list">
                    <div class="item">
                        <!--显示图片-->
                        <div class="news-pic">
                            <img src="http://img3.chouti.com/CHOUTI_C88926C26ABD48E0B6D95FDF8798FEA9_W260H260=C60x60.png">
                        </div>
                        <!--新闻中心-->
                        <div class ="news-content">
                            <!--显示主题-->
                            <div class="part1">
                                <a class="title">饮食、季节与阶级：欧亚大陆是如何联系起来的？</a>
                                <span class="sign-a">-www.jiemian.com</span>
                                <a>
                                    <span class="sign-a sign-b">42区</span>
                                </a>
                            </div>
                            <!--显示摘要-->
                            <div class="area-summary">
                                <span>生活在欧亚大陆东、西两端的人群是从什么时候开始、以及如何发生联系的？</span>
                            </div>
                            <!--显示赞...-->
                            <div class="part2">
                                <a class="pta">
                                    <span></span>
                                    <b>0</b>
                                </a>

                                <a class="ptb">
                                    <span></span>
                                    <b>0</b>
                                </a>
                                <a class="ptc">
                                    <span></span>
                                    <b>私藏</b>
                                </a>
                                <span></span>
                            </div>
                        </div>


                    </div>
                    <div class="item">
                        <!--显示图片-->
                        <div class="news-pic">
                            <img src="http://img3.chouti.com/CHOUTI_C88926C26ABD48E0B6D95FDF8798FEA9_W260H260=C60x60.png">
                        </div>
                        <!--新闻中心-->
                        <div class ="news-content">
                            <!--显示主题-->
                            <div class="part1">
                                <a class="title">饮食、季节与阶级：欧亚大陆是如何联系起来的？</a>
                                <span class="sign-a">-www.jiemian.com</span>
                                <a>
                                    <span class="sign-a sign-b">42区</span>
                                </a>
                            </div>
                            <!--显示摘要-->
                            <div class="area-summary">
                                <span>生活在欧亚大陆东、西两端的人群是从什么时候开始、以及如何发生联系的？</span>
                            </div>
                            <!--显示赞...-->
                            <div class="part2">
                                <a class="pta">
                                    <span></span>
                                    <b>0</b>
                                </a>

                                <a class="ptb">
                                    <span></span>
                                    <b>0</b>
                                </a>
                                <a class="ptc">
                                    <span></span>
                                    <b>私藏</b>
                                </a>
                                <span></span>
                            </div>
                        </div>


                    </div>
                    <div class="item">
                        <!--显示图片-->
                        <div class="news-pic">
                            <img src="http://img3.chouti.com/CHOUTI_C88926C26ABD48E0B6D95FDF8798FEA9_W260H260=C60x60.png">
                        </div>
                        <!--新闻中心-->
                        <div class ="news-content">
                            <!--显示主题-->
                            <div class="part1">
                                <a class="title">饮食、季节与阶级：欧亚大陆是如何联系起来的？</a>
                                <span class="sign-a">-www.jiemian.com</span>
                                <a>
                                    <span class="sign-a sign-b">42区</span>
                                </a>
                            </div>
                            <!--显示摘要-->
                            <div class="area-summary">
                                <span>生活在欧亚大陆东、西两端的人群是从什么时候开始、以及如何发生联系的？</span>
                            </div>
                            <!--显示赞...-->
                            <div class="part2">
                                <a class="pta">
                                    <span></span>
                                    <b>0</b>
                                </a>

                                <a class="ptb">
                                    <span></span>
                                    <b>0</b>
                                </a>
                                <a class="ptc">
                                    <span></span>
                                    <b>私藏</b>
                                </a>
                                <span></span>
                            </div>
                        </div>


                    </div>
                    <div class="item">
                        <!--显示图片-->
                        <div class="news-pic">
                            <img src="http://img3.chouti.com/CHOUTI_C88926C26ABD48E0B6D95FDF8798FEA9_W260H260=C60x60.png">
                        </div>
                        <!--新闻中心-->
                        <div class ="news-content">
                            <!--显示主题-->
                            <div class="part1">
                                <a class="title">饮食、季节与阶级：欧亚大陆是如何联系起来的？</a>
                                <span class="sign-a">-www.jiemian.com</span>
                                <a>
                                    <span class="sign-a sign-b">42区</span>
                                </a>
                            </div>
                            <!--显示摘要-->
                            <div class="area-summary">
                                <span>生活在欧亚大陆东、西两端的人群是从什么时候开始、以及如何发生联系的？</span>
                            </div>
                            <!--显示赞...-->
                            <div class="part2">
                                <a class="pta">
                                    <span></span>
                                    <b>0</b>
                                </a>

                                <a class="ptb">
                                    <span></span>
                                    <b>0</b>
                                </a>
                                <a class="ptc">
                                    <span></span>
                                    <b>私藏</b>
                                </a>
                                <span></span>
                            </div>
                        </div>


                    </div>
                    <div class="item">
                        <!--显示图片-->
                        <div class="news-pic">
                            <img src="http://img3.chouti.com/CHOUTI_C88926C26ABD48E0B6D95FDF8798FEA9_W260H260=C60x60.png">
                        </div>
                        <!--新闻中心-->
                        <div class ="news-content">
                            <!--显示主题-->
                            <div class="part1">
                                <a class="title">饮食、季节与阶级：欧亚大陆是如何联系起来的？</a>
                                <span class="sign-a">-www.jiemian.com</span>
                                <a>
                                    <span class="sign-a sign-b">42区</span>
                                </a>
                            </div>
                            <!--显示摘要-->
                            <div class="area-summary">
                                <span>生活在欧亚大陆东、西两端的人群是从什么时候开始、以及如何发生联系的？</span>
                            </div>
                            <!--显示赞...-->
                            <div class="part2">
                                <a class="pta">
                                    <span></span>
                                    <b>0</b>
                                </a>

                                <a class="ptb">
                                    <span></span>
                                    <b>0</b>
                                </a>
                                <a class="ptc">
                                    <span></span>
                                    <b>私藏</b>
                                </a>
                                <span></span>
                            </div>
                        </div>


                    </div>
                    <div class="item">
                        <!--显示图片-->
                        <div class="news-pic">
                            <img src="http://img3.chouti.com/CHOUTI_C88926C26ABD48E0B6D95FDF8798FEA9_W260H260=C60x60.png">
                        </div>
                        <!--新闻中心-->
                        <div class ="news-content">
                            <!--显示主题-->
                            <div class="part1">
                                <a class="title">饮食、季节与阶级：欧亚大陆是如何联系起来的？</a>
                                <span class="sign-a">-www.jiemian.com</span>
                                <a>
                                    <span class="sign-a sign-b">42区</span>
                                </a>
                            </div>
                            <!--显示摘要-->
                            <div class="area-summary">
                                <span>生活在欧亚大陆东、西两端的人群是从什么时候开始、以及如何发生联系的？</span>
                            </div>
                            <!--显示赞...-->
                            <div class="part2">
                                <a class="pta">
                                    <span></span>
                                    <b>0</b>
                                </a>

                                <a class="ptb">
                                    <span></span>
                                    <b>0</b>
                                </a>
                                <a class="ptc">
                                    <span></span>
                                    <b>私藏</b>
                                </a>
                                <span></span>
                            </div>
                        </div>


                    </div>
                    <div class="item">
                        <!--显示图片-->
                        <div class="news-pic">
                            <img src="http://img3.chouti.com/CHOUTI_C88926C26ABD48E0B6D95FDF8798FEA9_W260H260=C60x60.png">
                        </div>
                        <!--新闻中心-->
                        <div class ="news-content">
                            <!--显示主题-->
                            <div class="part1">
                                <a class="title">饮食、季节与阶级：欧亚大陆是如何联系起来的？</a>
                                <span class="sign-a">-www.jiemian.com</span>
                                <a>
                                    <span class="sign-a sign-b">42区</span>
                                </a>
                            </div>
                            <!--显示摘要-->
                            <div class="area-summary">
                                <span>生活在欧亚大陆东、西两端的人群是从什么时候开始、以及如何发生联系的？</span>
                            </div>
                            <!--显示赞...-->
                            <div class="part2">
                                <a class="pta">
                                    <span></span>
                                    <b>0</b>
                                </a>

                                <a class="ptb">
                                    <span></span>
                                    <b>0</b>
                                </a>
                                <a class="ptc">
                                    <span></span>
                                    <b>私藏</b>
                                </a>
                                <span></span>
                            </div>
                        </div>


                    </div>
                    <div class="item">
                        <!--显示图片-->
                        <div class="news-pic">
                            <img src="http://img3.chouti.com/CHOUTI_C88926C26ABD48E0B6D95FDF8798FEA9_W260H260=C60x60.png">
                        </div>
                        <!--新闻中心-->
                        <div class ="news-content">
                            <!--显示主题-->
                            <div class="part1">
                                <a class="title">饮食、季节与阶级：欧亚大陆是如何联系起来的？</a>
                                <span class="sign-a">-www.jiemian.com</span>
                                <a>
                                    <span class="sign-a sign-b">42区</span>
                                </a>
                            </div>
                            <!--显示摘要-->
                            <div class="area-summary">
                                <span>生活在欧亚大陆东、西两端的人群是从什么时候开始、以及如何发生联系的？</span>
                            </div>
                            <!--显示赞...-->
                            <div class="part2">
                                <a class="pta">
                                    <span></span>
                                    <b>0</b>
                                </a>

                                <a class="ptb">
                                    <span></span>
                                    <b>0</b>
                                </a>
                                <a class="ptc">
                                    <span></span>
                                    <b>私藏</b>
                                </a>
                                <span></span>
                            </div>
                        </div>


                    </div>


                </div>
                <div class="contion-list"><div class="item"></div></div>
            </div>
            <!--页码-->
            <div class="numbers">
            <ul>
                <li class="li-a"><a>1</a></li>
                <li class="li-a"><a>2</a></li>
                <li class="li-a"><a>3</a></li>
                <li class="li-a"><a>4</a></li>
                <li class="li-a"><a>5</a></li>
                <li class="li-a"><a>6</a></li>
                <li class="li-a"><a>7</a></li>
                <li class="li-a"><a>8</a></li>
                <li class="li-a"><a>9</a></li>
                <li class="li-a"><a>10</a></li>
                <li class="li-b"><a>下一页</a></li>

            </ul>
        </div>
            <div class="contion-R"></div>
        </div>
        <div class="footer">
        <div class="w"  style="background-color: white; border-top: 1px solid #ccdcef;">
            <div class="f1-w" style="margin-top: 15px;">
                <a href="http://www.egouz.com/topics/5399.html">关于我们</a>
                <span>|</span>
                <a href="http://www.egouz.com/topics/5399.html">联系我们</a>
                <span>|</span>
                <a href="http://www.egouz.com/topics/5399.html">服务条款</a>
                <span>|</span>
                <a href="http://www.egouz.com/topics/5399.html">隐私政策</a>
                <span>|</span>
                <a href="http://www.egouz.com/topics/5399.html">抽屉新榜</a>
                <span>|</span>
                <a href="http://www.egouz.com/topics/5399.html">下载客户端</a>
                <span>|</span>
                <a href="http://www.egouz.com/topics/5399.html">意见与反馈</a>
                <span>|</span>
                <a href="http://www.egouz.com/topics/5399.html">友情链接</a>
                <span>|</span>
                <a href="http://www.egouz.com/topics/5399.html">公告</a>
                <a href="http://www.egouz.com/topics/5399.html" class="img">
                    <img src="http://dig.chouti.com/images/ct_rss.gif" >
                </a>
            </div>
            <div class="f2-w" style="margin-top: 5px">
                <a href="http://www.egouz.com/topics/5399.html"><img src=http://dig.chouti.com/images/gozap-logo-50_15.gif></a>
                <span >旗下站点</span>
                <span>©2017chouti.com</span>
                <a href="http://www.miibeian.gov.cn/" style="color: #999">京ICP备09053974号-3 京公网安备 110102004562</a>
            </div>
            <div class="f3-w" style="margin-top: 5px">
                <span >违法和不良信息举报：</span>
                <span >电话：010-58302039 </span>
                <span >邮箱： </span>
                <span ><a href="https://mail.qq.com/" style="color: #369">jubao@chouti.com</a> </span>
            </div>
            <div class="f3-w" style="margin-top: 5px;padding-bottom: 15px">
                版权所有：北京格致璞科技有限公司
            </div>
        </div>
    </div>
    </div>
    <!--返回顶部按钮-->
    <a class="topbot hide" onclick='TopBot()'></a>

    <!--登录注册模态框-->
    <div class="Models hide">
        <div class="back"></div>
        <div class="login-register">
            <div class="login">
                <div class="left rel color">登录
                    <p><span id="log-prompt" class="prompt"></span></p>
                </div>

                <div class="center">
                    <p><input type="text" placeholder="邮箱" id="log-username"></p>
                    <p><input type="password" placeholder="密码" id="log-pwd"></p>
                    <p><input type="text" placeholder="验证码" id="log-code"><img src='/check_code' onclick="Changecode()" id="codes"></p>
                    <p><input type="button" value="登录" class="login-buttom" onclick="Login(this)"></p>
                </div>
            </div>
            <div class="register">
                <div class="right rel color">
                    注册<a class="esc">×</a>
                    <p><span id="prompt" class="prompt"></span></p>
                </div>
                <div class="center">
                    <p><input type="text" placeholder="邮箱" class="username" id="email"></p>

                    <p><input type="text" placeholder="验证码" id="code">
                        <input type="button" value="获取验证码" onclick="Code(this)">
                    </p>
                    <p><input type="password" placeholder="密码" id="pwd"></p>
                    <p><input type="button" value="注册" onclick="Register()"></p>
                </div>
            </div>
        </div>
    </div>

    <!--发布模态框-->
    <div class="Fb hide">
        <div class="back"></div>
        <div class="content">
            <div class="title">
                <span class="title-a">分享与发现</span>
                <a href="javascript:void(0)" class="title-b" id="title-b">×</a>
            </div>
            <div class="con-content">
                <div class="con-title">
                    <a class="conn show-a" name="conn" onclick="f1(this)">连接</a>
                    <a class="word" name="word" onclick="f1(this)">文字</a>
                    <a  class="picture"  name="picture" onclick="f1(this)">图片</a>
                </div>
                <div class="show">
                    <div class="a" id="conn"></div>
                    <div class="b hide" id="word">
                        <div class="b-a b-c">添加标题</div>
                        <div class="b-b">
                            <input type="text">
                        </div>
                        <div class="b-c b-a">内容摘要</div>
                        <div class="b-d b-b">
                            <textarea name="" rows="4" placeholder="请输入内容..."></textarea>
                        </div>
                        <div class="b-f c-d">
                            <span>你还可以输入150个字</span>
                        </div>
                        <div class="b-g c-e">
                            <a class="ce-a">发布</a>
                        </div>
                    </div>
                    <div class="c hide" id="picture">
                        <div class="c-a">添加图片</div>
                        <div class="c-b">
                            <div>
                                <a href="javascript:void(0)">上传
                                    <input type="file">
                                </a>
                                <span>支持jpg、jpeg、gif、png格式，且不超过5MB</span>
                            </div>
                        </div>
                        <div class="c-c">
                            <textarea name="picture" rows="4" placeholder="请输入图片描述..."></textarea>
                        </div>
                        <div class="c-d">
                            <span>你还可以输入150个字</span>
                        </div>
                        <div class="c-e">
                            <a class="ce-a">发布</a>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </div>




    <script type="text/javascript">
        <!--返回顶部图标显示或者隐藏-->
        window.onscroll = function () {
            var index = $(window).scrollTop();
            if (index > 150){
                $(".topbot").removeClass('hide')
            }else {
                $(".topbot").addClass('hide')
            }
        };
        //返回顶部
        function TopBot() {
                var xx = $(window).scrollTop(0);
                console.log(xx)
        }

//      登陆注册模态框
        $(".login-btn").click(
            function () {$('.Models').removeClass('hide')
            }
        );
        $(".Models .right a").click(
            function () {$('.Models').addClass('hide')
            }
        );
        function Code(ths) {
            var email = $('#email').val();
            $.ajax({
                url:"/sendcode",
                type:'post',
                data:{em:email},
                success:function (arg) {
                        $("#prompt").text(arg)
                },
                error:function (arg) {
                       alert(arg)
                }

            })

        }
        function Register(ths) {
            var email = $('#email').val();
            var code = $("#code").val();
            var pwd = $("#pwd").val();
            $.ajax({
                url:"/register",
                type:'post',
                data:{em:email,cd:code,pwd:pwd},
                success:function (arg) {
                    $("#prompt").text(arg)
                },
                error:function () {
                       alert("error  register")
                }

            })

        }
        function Login(ths) {
            var username = $('#log-username').val();
            var pwd = $("#log-pwd").val();
            var code = $("#log-code").val();
            $.ajax({
                url:"/login",
                type:'post',
                data:{username:username,cd:code,pwd:pwd},
                success:function (arg) {
                    if(arg == "1"){
                        location.href= '/home';
//                        console.log(arg)
                    }
                    else {
                        $("#log-prompt").text(arg)
                    }
                },
                error:function () {
                       alert("error xxx")
                }

            })

        }

//        图片验证码点击更换
        function Changecode() {
            var code = document.getElementById("codes");
            code.src += "?";
        }
//        发布模态框
        $('.tm-c').click(function () {
            $(".Fb").removeClass("hide")

        });
        $("#title-b").click(function () {
            $(".Fb").addClass("hide")

        });
        $(".title").mousedown(function (e) {
            var _event = e || window.event;
            var ord_x = _event.clientX;
            var ord_y = _event.clientY;
            var parent_left = $(this).parent().offset().left;
            var parent_top = $(this).parent().offset().top;
            console.log(ord_x,parent_left);
            $(this).mousemove(function (e) {
                var _new_event = e || window.event;
                var new_ord_x = _new_event.clientX;
                var new_ord_y = _new_event.clientY;
                var x = parent_left + new_ord_x - ord_x;
                var y = parent_top + new_ord_y - ord_y;
                $(this).parent().css('left',x);
                $(this).parent().css('top',y);
            })


        }).mouseup(function () {
            $(this).unbind('mousemove')
        })
        function f1(ths) {
            $(ths).addClass('show-a').siblings().removeClass('show-a');
            var name = $(ths).attr('name');
            console.log(name);
            $('.show #'+name).removeClass('hide').siblings().addClass('hide')

        }
    </script>
    {% block js %}{% end %}

</body>
</html>